@bg-color:#b7d4a8;
body{
  background-color: skyblue;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-size: 20px;
  font-weight: 700;
  font-family: Courier;
}

#main{
  display: flex;
  // 改变主轴方向为y
  flex-flow: column;
  // 主轴方向对齐 均分
  justify-content: space-around;
  // 主轴方向居中对齐
  align-items: center;

  width: 360px;
  height: 420px;
  background-color: @bg-color;
  border: 10px solid #000;
  border-radius: 30px;
  margin: 100px auto;
  // 游戏舞台
  .state{
    position: relative;
    width: 304px;
    height: 304px;
    border: 2px solid #000;
    // 蛇
    .snake{
      &>div{
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #000;
      border: 1px solid @bg-color;
      }
    }
    // 食物
    .food{
      // 开启弹性盒
      display: flex;
      // 设置横轴为主轴 wrap表示自动换行
      flex-flow: row wrap;
      
      // 设置主轴和侧轴的空白空间分配到元素之间
      justify-content: space-around;
      align-content: space-around;
      position: absolute;
      left: 40px;
      top: 100px;
      width: 10px;
      height: 10px;
      &>div{
        width: 4px;
        height: 4px;
        background-color: black;
        transform: rotate(45deg);
      }
    }
  }
  // 记分牌
  .score-panel{
    width: 300px;
    display: flex;
    justify-content: space-between;
  }
}